<template>
  <view class="app-container pay-page">
    <view class="content">
      <view class="amount">
        <view class="title">支付金额</view>
        <view class="number" v-if="bill">¥{{bill.cost}}</view>
      </view>
      <view class="pay-methods">
        <view class="pay-method-item" @click="selectPayMethod('微信支付')">
          <view class="left">
            <image class="icon"
                   style="width: 66px; height: 66px"
                   src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-front/druid/saas-v5/%E5%BE%AE%E4%BF%A1%E6%94%AF%E4%BB%98%402x.png"
                   mode="widthFix"></image>
          </view>
          <view class="middle">微信支付</view>
          <view class="right" v-if="payMethod === '微信支付'">
            <u-icon name="checkmark-circle-fill" color="#19be6b" size="28"></u-icon>
          </view>
        </view>
        <!--<view class="pay-method-item" @click="selectPayMethod('支付宝')">-->
        <!--  <view class="left">-->
        <!--    <image class="icon"-->
        <!--           style="width: 66px; height: 66px"-->
        <!--           src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-front/druid/saas-v5/%E6%94%AF%E4%BB%98%E5%AE%9D%E6%94%AF%E4%BB%98%402x.png"-->
        <!--           mode="widthFix"></image>-->
        <!--  </view>-->
        <!--  <view class="middle">支付宝</view>-->
        <!--  <view class="right" v-if="payMethod === '支付宝'">-->
        <!--    <u-icon name="checkmark-circle-fill" color="#19be6b" size="28"></u-icon>-->
        <!--  </view>-->
        <!--</view>-->
      </view>
    </view>
    <view class="footer">
      <view class="pay-bar">
        <view class="left">
          <view class="unit">¥</view>
          <view class="number">{{bill.cost}}</view>
        </view>
        <view class="right">
          <u-button color="#FF7947" shape="circle" @click="pay">确定交易</u-button>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import {ownerBillDetail, ownerBillPay} from "@/api/mine/owner";

export default {
  data() {
    return {
      bill: {},
      billId: null,
      payMethod: '微信支付'
    };
  },
  onLoad(options) {
    this.billId = options.id
    this.getOwnerBillDetail(this.billId)
  },
  methods: {
    getOwnerBillDetail(billId) {
      ownerBillDetail(billId).then(res => {
        this.bill = res.data;
      })
    },
    selectPayMethod(payMethod) {
      this.payMethod = payMethod
    },
    pay() {
      ownerBillPay(this.billId).then(res=>{
        const options = res.data;
        console.log(options)
        uni.requestPayment({
          provider: 'wxpay',
          timeStamp: options.timeStamp,
          nonceStr: options.nonceStr,
          package: options.package,
          signType: options.signType,
          paySign: options.paySign,
          success: (res) => {
            console.log('支付成功', res);
            this.$tab.switchTab('/pages/mine/index')
          },
          fail: (err) => {
            console.error('支付失败', err);
          }
        });

      })
    }
  }
}
</script>

<style lang="scss" scoped>
.pay-page {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;

  .content {
    .amount {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: 40rpx;

      .title {
        font-size: 32rpx;
      }

      .number {
        margin-top: 20rpx;
        font-size: 42rpx;
        font-weight: bold;
      }
    }

    .pay-methods {
      background-color: #fff;
      margin-top: 40rpx;

      .pay-method-item {
        display: flex;
        padding: 20rpx;
        justify-content: center;
        align-items: center;

        .left {
          width: 60rpx;
          height: 60rpx;
        }

        .middle {
          flex: 1;
          margin-left: 20rpx;
        }

        .right {
          width: 120rpx;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }

  .footer {
    background-color: #f8f8f8;
    border-top: 1px solid #e0e0e0;
    padding: 16rpx 16px  env(safe-area-inset-bottom) 16rpx;
    .pay-bar {
      display: flex;
      justify-content: space-between;

      .left {
        display: flex;
        align-items: center;
        color: #FF7947;

        .unit {
          font-size: 28rpx;

        }

        .number {
          font-size: 42rpx;
          font-weight: bold;
        }
      }

      .right {
        width: 200rpx;
      }
    }
  }


}

</style>
